<template>
  <van-nav-bar title="PK" />
  <div class="top">
    <div class="time">
      <span>剩余时间:</span>
      <van-count-down :time="time" />
    </div>
    <div class="count">
      <span>{{ currentNum }}/7</span>
    </div>
  </div>
  <div class="user_container">
    <div class="user1 user">
      <img class="user_image" src="../../assets/image/头像1.png" alt="" />
      <span>{{ user1.name }}</span>
      <div class="process1">
        <div ref="process1Width" class="prosess_content1">
          <span>{{ score.user1Score }}</span>
        </div>
      </div>
    </div>
    <img class="pk_image" src="../../assets/image/Vector.png" alt="" />
    <div class="user2 user">
      <img class="user_image" src="../../assets/image/头像2.jpg" alt="" />
      <span>{{ user2.name }}</span>
      <div class="process2">
        <div ref="process2Width" class="prosess_content2">
          <span>{{ score.user2Score }}</span>
        </div>
      </div>
    </div>
  </div>
  <div class="question">
    <div class="question_title">{{ questionInfo.title }}</div>
    <div class="selections_container">
      <div
        class="selections"
        v-for="(item, index) in questionInfo.selections"
        :key="index"
        @click="judge(item)"
      >
        <div class="detailOption">
          {{ item.detailOption }}
        </div>
        <div class="detailContent">
          {{ item.detailContent }}
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { ref } from "vue";
import router from "../../router";
export default {
  setup() {
    const time = ref(5 * 60 * 1000);
    return { time };
  },
  data() {
    return {
      score: {
        user1Score: 0,
        user2Score: 0,
      },
      pkForm: {},
      // 获取用户1信息的请求参数
      getUser1InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: window.sessionStorage.getItem("account") },
      },
      // 获取用户2信息的请求参数
      getUser2InfoQueryInfo: {
        methodName: "battle_getOpponentBasicInfo",
        data: { param: "" },
      },
      user1: {
        name: "",
        icon: "",
      },
      user2: {
        name: "",
        icon: "",
      },
      currentNum: 1,
      exerciseArr: [],
      // 获取题目信息的请求参数
      exerciseQueryInfo: {
        methodName: "battle_getQuestionInfoById",
        data: { param: "" },
      },
      questionInfo: {},
      // 记录每道题的结果
      noteAnswerResultQueryInfo: {
        methodName: "battle_noteAnswerResult",
        data: {
          majorId: "",
          questionId: "",
          answer: "",
          score: "",
        },
      },
      // 获取对方信息
      getOpponentInfoQueryInfo: {
        methodName: "battle_getOpponentInfo",
        data: { param: "" },
      },
      // 自身完成答题
      completeCurBattleQueryInfo: {
        methodName: "battle_completeCurBattle",
        data: {
          majorId: "",
          totalScore: "",
          titleCount: "",
          accuracy: "",
          consumeTime: "",
        },
      },
    };
  },
  created() {
    this.getPkInfo();
    this.getUser1Info();
    this.getUser2Info();
    this.getExerciseById();
  },
  mounted() {
    this.processWidth();
    this.getOpponentInfo();
    this.isEnding();
  },
  methods: {
    // 控制进度条
    processWidth() {
      this.$refs.process1Width.style.width =
        (this.score.user1Score / 7) * 125 + "px";
      this.$refs.process2Width.style.width =
        (this.score.user2Score / 7) * 125 + "px";
    },
    // 获取对战信息
    getPkInfo() {
      this.pkForm = JSON.parse(window.sessionStorage.getItem("pkForm"));
      this.noteAnswerResultQueryInfo.data.majorId =
        this.pkForm.matchRelationship.battleId;
      this.completeCurBattleQueryInfo.data.majorId =
        this.pkForm.matchRelationship.battleId;
      console.log(this.pkForm);
    },
    // 获取对战双方
    async getUser1Info() {
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser1InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user1.name = JSON.parse(res.data).nickname;
    },
    async getUser2Info() {
      console.log("pkForm", this.pkForm);
      this.getUser2InfoQueryInfo.data.param =
        this.pkForm.matchRelationship.opponentAccount;
      const { data: res } = await this.$http.post(
        "/app/main",
        this.getUser2InfoQueryInfo,
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.user2.name = JSON.parse(res.data).nickname;
    },
    // 根据题目id获取题目
    async getExerciseById() {
      console.log(
        "exerciseArr",
        JSON.parse(this.pkForm.matchRelationship.data)
      );
      this.exerciseArr = JSON.parse(this.pkForm.matchRelationship.data);
      this.exerciseQueryInfo.data.param =
        this.exerciseArr[this.currentNum - 1].tsExerciseTitleId;
      const { data: res } = await this.$http.post(
        "/app/main",
        JSON.stringify(this.exerciseQueryInfo),
        {
          headers: {
            "Content-Type": "application/json",
          },
        }
      );
      this.questionInfo = JSON.parse(res.data).questionInfo;
      if (this.questionInfo.titleType == "03") {
        this.questionInfo.selections = [
          { detailOption: "T", detailContent: "" },
          { detailOption: "F", detailContent: "" },
        ];
      }
      this.noteAnswerResultQueryInfo.data.questionId =
        this.exerciseArr[this.currentNum - 1].tsExerciseTitleId;
      console.log(this.questionInfo);
    },
    // 判断题目的对错
    async judge(item) {
      if (item.detailOption == this.questionInfo.answer) {
        this.score.user1Score++;
        this.currentNum++;
        this.processWidth();
        this.getExerciseById();
        console.log("此题答对了");
        this.noteAnswerResultQueryInfo.data.answer = item.detailOption;
        this.noteAnswerResultQueryInfo.data.score = 1;
        const { data: res } = await this.$http.post(
          "/app/main",
          JSON.stringify(this.noteAnswerResultQueryInfo),
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
      } else {
        this.currentNum++;
        this.processWidth();
        this.getExerciseById();
        this.noteAnswerResultQueryInfo.data.answer = item.detailOption;
        this.noteAnswerResultQueryInfo.data.score = 0;
      }
    },
    // 获取对方信息
    getOpponentInfo() {
      this.getOpponentInfoQueryInfo.data.param =
        this.pkForm.matchRelationship.opponentAccount;
      console.log("被调用");
      setInterval(async () => {
        const { data: res } = await this.$http.post(
          "/app/main",
          JSON.stringify(this.getOpponentInfoQueryInfo),
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        );
        console.log("res", res);
        this.score.user2Score = JSON.parse(res.data).opponentInfo.userScore;
        console.log("user2Score", this.score.user2Score);
        this.processWidth();
      }, 1000);
    },
    // 判断是否结束
    async isEnding() {
      const intervalId = setInterval(async () => {
        console.log(this.currentNum);
        if (this.currentNum > 7) {
          this.completeCurBattleQueryInfo.data.totalScore =
            this.score.user1Score;
          this.completeCurBattleQueryInfo.data.titleCount = this.currentNum - 1;
          this.completeCurBattleQueryInfo.data.accuracy =
            ((this.score.user1Score / 7) * 100) >> 0;
          this.completeCurBattleQueryInfo.data.consumeTime = 155;
          const { data: res } = await this.$http.post(
            "/app/main",
            JSON.stringify(this.completeCurBattleQueryInfo),
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          );
          console.log("completeCurBattleQueryInfo", res);
          if (res.code == 200) {
            clearInterval(intervalId);
            router.push("/pkResult");
          }
        }
      }, 1000);
    },
  },
};
</script>
    
<style scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top .time {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.top span {
  font-size: 30px;
}
.user_container {
  margin-top: 100px;
  display: flex;
  justify-content: space-around;
  align-self: center;
}
.user_image {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}
.pk_image {
  height: 100px;
}
.user {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.user span {
  font-size: 30px;
}
.process1 {
  width: 250px;
  height: 40px;
  background-color: #74acc3;
  border-radius: 20px 0 0 20px;
}
.prosess_content1 {
  width: 0px;
  height: 40px;
  background-color: #224192;
  border-radius: 20px 0 0 20px;
  text-align: center;
}
.prosess_content1 span {
  display: block;
  color: #fff;
}
.process2 {
  width: 250px;
  height: 40px;
  background-color: #f57f7f;
  border-radius: 0px 20px 20px 0px;
  position: relative;
}
.prosess_content2 {
  position: absolute;
  right: 0;
  width: 0px;
  height: 40px;
  background-color: #d92d2d;
  border-radius: 0px 20px 20px 0px;
  text-align: center;
}
.prosess_content2 span {
  display: block;
  color: #fff;
}
.question {
  margin-top: 40px;
  font-size: 30px;
}
.question_title {
  margin-left: 20px;
}
.selections {
  margin: 20px 40px;
  padding: 20px;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 50px;
  border: 1px solid #dddddd;
}
.selections .detailOption {
  width: 30px;
  height: 30px;
}
</style>